<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.wrap1 {
				position: relative;
				z-index: -1;
				width: 600%;
				height: 300px;
			}
			
			.wrap {
				position: relative;
				margin: 0 auto;
				overflow: hidden;
				width: 500px;
				height: 300px;
			}
			
			.wrap1 li {
				display: inline-block;
				position: absolute;
			}
			
			.wrap1 img,
			.wrap1 li {
				width: 500px;
				height: 300px;
			}
			
			.wrap span {
				position: absolute;
				display: inline-block;
				width: 80px;
				height: 100%;
				font-size: 100px;
				text-align: center;
			}
			
			#pre {
				left: 0;
				line-height: 300px;
				color: red;
			}
			
			#next {
				right: 0;
				line-height: 300px;
				color: red;
			}
			
			ul {
				padding: 0;
			}
			
			#round {
				position: absolute;
				left: 50%;
				margin-left: -150px;
				bottom: 0;
				width: 300px;
				text-align: center;
			}
			
			#round li {
				display: inline-block;
				list-style-type: none;
				width: 20px;
				height: 20px;
				background-color: white;
				border-radius: 50%;
			}
			
			#round .on {
				background-color: black;
			}
		</style>
	</head>

	<body>
		<div class="wrap">
			<span id="pre">
				<
			</span>
			<span id="next">
				>
			</span>
			<ul id="round">
				<li class="on"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<ul class="wrap1" id="wrap1">
				<li><img src="images/6.jpg" /></li>
				<li><img src="images/1.jpg" /></li>
				<li><img src="images/2.jpg" /></li>
				<li><img src="images/3.jpg" /></li>
				<li><img src="images/4.jpg" /></li>
				<li><img src="images/5.jpg" /></li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		//		初始化距离值
		var step = 500;
		var value = [];
		var owrap = document.getElementsByClassName("wrap1")[0];
		var lis = owrap.getElementsByTagName("li");
		//初始化left
		(function() {
			var oRound = document.getElementById("round");
			var rLis = oRound.getElementsByTagName("li");
			var r = -500;
			for(var i = 0; i < lis.length; i++) {
				rLis[i].index = i;
				lis[i].style.left = r + "px";
				value.splice(value.length, 0, r);
				r += 500;
			}
		})();
		var time1 = new Date();
		//左移动与右移动
		(function() {
			var oPre = document.getElementById("pre");
			var oNext = document.getElementById("next");
			var oRound = document.getElementById("round");
			var getClassOn = oRound.getElementsByClassName("on");
			var lis = oRound.getElementsByTagName("li");
			oPre.onclick = function() {
				if((new Date() - time1) < 350) return;
				var index = getClassOn[0].index;
				getClassOn[0].classList.toggle("on");
				index--;
				index < 0 ? index = 5 : index;
				lis[index].classList.toggle("on");
				leftMove(1);
				time1 = new Date();
			}
			oNext.onclick = function() {
				if((new Date() - time1) < 350) return;
				var index = getClassOn[0].index;
				getClassOn[0].classList.toggle("on");
				index++;
				index > 5 ? index = 0 : index;
				lis[index].classList.toggle("on");
				rightMove(1);
				time1 = new Date();
			}
		})();
		//小圆点
		(function() {
			var round = document.getElementById("round");
			var oRound = round.getElementsByTagName("li");
			var getClassOn = round.getElementsByClassName("on");
			for(var i = 0; i < oRound.length; i++) {
				oRound[i].onclick = function() {
					if((new Date() - time1) < 350) return;
					var now = getClassOn[0].index;
					var mb = this.index;
					getClassOn[0].classList.toggle("on");
					this.classList.toggle("on");
					var number = Math.abs(now - mb);
					if(now > mb) { //往左
						leftMove(number);
					}
					if(now < mb) { //往右
						rightMove(number)
					}
					time1 = new Date();
				}
			}
		})();
		//左移动
		function leftMove(count) {
			for(var i = 0; i < count; i++) {
				value = value.map(function(item, index, self) {
					var num = item + 500;
					(num > 2000) && (lis[index].style.visibility = "hidden", (function(ll) {
						setTimeout(function() {
							ll.style.visibility = "visible";
						}, 300);
					})(lis[index]));
					return num > 2000 ? -500 : num;
				})
			}
			value.forEach(function(item, index, self) {
				animation(lis[index], "left", item, 300);
			});
		}
		//右移动
		function rightMove(count) {
			
			for(var i = 0; i < count; i++) {
				value = value.map(function(item, index, self) {
					var num = item - 500;
					(num < -500) && (lis[index].style.visibility = "hidden", (function(ll) {
						setTimeout(function() {
							ll.style.visibility = "visible";
						}, 300);
					})(lis[index]));
					return num < -500 ? 2000 : num;
				})
			}
			value.forEach(function(item, index, self) {
				animation(lis[index], "left", item, 300);
			});
			
		}

		//运动框架
		function animation(ele, attr, value, time, callback) {
			//获取时间开始值
			var goTime = new Date().getTime(), //当前时间的毫秒数
				startValue = parseFloat(getStyle(ele)[attr]), //初始值
				change = value - startValue; //结束 减去 开始（总路程）
			function fn() {
				//(当前时间 - 开始时间 ) / 结束时间
				var now = (new Date().getTime() - goTime) / time;

				if(now >= 1) {
					//超过1就等于1
					now = 1;
					ele.style[attr] = startValue + change * now + 'px';
					callback && callback.call(ele);
				} else {
					//开始位置 + 总路程*时间比例
					ele.style[attr] = startValue + change * now + 'px';
					//当前时间比例
					requestAnimationFrame(fn); //下次浏览器重绘
				}
			}
			fn();
		}
		//获取最终样式
		function getStyle(ele) {
			return ele.currentStyle || getComputedStyle(ele);
		}
	</script>

</html>